{extend name="platform/base" /}
{block name="resources"/}
<style>
.table{
	width:98%;
	display:table;
    border-left: 1px dotted #e5e5e5;
    border-right: 1px dotted #e5e5e5;
    border-bottom: 1px dotted #e5e5e5;
    background: rgba(204, 204, 204, 0.09);
    padding: 0px 10px 10px 10px;
}
.table-body{
/* 	min-height:50px; */
	max-height:410px;
	overflow-y:auto;
	overflow-x:hidden;
}
.inline-block{display:inline-block;}
.w5{width:5%;}
.w75{width:14%;}
.w19{width:10%;text-align:center;float: right;}
.w100{width:100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dotted #e5e5e5;}
.add-spec{
	height: 40px;
    line-height: 40px;
	border-bottom:1px dotted #E6E6E6;
}
input{
	vertical-align: initial;
}
.table input[type="text"], input[type="password"], input.text, input.password {
    font: 12px/20px Arial;
    color: #777;
    background-color: #FFF;
    vertical-align: baseline;
	margin-bottom:0px;
}
.set-style dl dt {
	text-align:left;
	    width: 7%;
}
label.line-label{
	display:inline-block;
	margin-right:10px;
	font-weight:normal;
}
.edit_button{
	background-color: #53b567;
    border-color: #4bae5f;
    color: #fff;
    width: 80px;
    line-height: 30px;
    border: 0;
}
.ralationguige{
	padding:10px;
	font-weight: normal;
}
.text-active, .active>.text {
     display: block;
}

.attr_table{
	position: fixed;
	top: 10%;
	left: 50%;
	z-index: 1050;
	width: 560px;
	margin-left: -280px;
	background-color: #ffffff;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, 0.3);
	outline: none;	
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	background-clip: padding-box;
}

</style>
{/block}
{block name="main"}
<section class="panel panel-default">
	<header class="panel-heading font-bold"> 修改类型 </header>
	<div class="panel-body">
		<div class="form-horizontal" id="goods_brand_form" name="form">
			<div class="form-group">
				<label class="col-sm-2 control-label">类型名称：</label>
				<div class="col-md-2">
					<input type="text" class="form-control" id="attr_name" name="attr_name" value="{$info.attr_name}" required>
				</div>
<!-- 				<label class="col-md-8 error" for="brand_name" ></label> -->
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label">属性排序：</label>
				<div class="col-md-1">
					<input type="text" class="form-control" id="sort" value="{$info.sort}" placeholder="0" onkeyup='this.value=this.value.replace(/\D/gi,"")' required>
				</div>
<!-- 				<label class="col-md-9 error" for="brand_initial" ></label> -->
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label">是否启用：</label>
				<div class="col-md-4">
					<label class="switch">
                         <input id="is_visible" type="checkbox" {if condition="$info.is_use eq 1"}checked="checked"{/if}>
                         <span></span> 
                    </label>
				</div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
           	<div class="form-group">
				<div class="table">
					<label class="col-sm-2 control-label">关联规格：</label>
					{if condition="$goodsguige neq ''"}
					<div class="padding-top padding-left padding-right attr-choose-wrap clearfix" style="border-bottom: 1px dotted #e5e5e5;width: 83%;float: right;text-align: left;">
						{foreach name="goodsguige['data']" item="v"}
						<label class="ralationguige" style="margin-top: 8px;"><input type="checkbox" value="{$v.spec_id}" {in name="v.spec_id" value="$info.spec_id_array"}checked{/in} name="spec"/>{$v.spec_name}</label>
						{/foreach}
					</div>
					{/if}
				</div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="table">
				<div class="w100">
					<div class="col-sm-2 control-label"></div>
					<div class="inline-block w75">排序</div>
					<div class="inline-block w75">属性名称</div>
					<div class="inline-block w75">所属类型</div>
					<div class="inline-block w75">属性值</div>
					<div class="inline-block w75">是否筛选</div>
					<div class="inline-block w19">操作</div>
				</div>
				<div class="table-body">
				{foreach name="info['value_list']['data']" item="v" key=key}
					<div class="w100 value_data">
						<div class="col-sm-2 control-label"><label style="margin-left: 5px;"><input type="checkbox"></label></div>
						<div class="inline-block w75">
							<input type="text" name="value_sort" value="{$v.sort}" onchange="updateAttrvalue('value_sort',{$v.attr_value_id},this);" />
						</div>
						<div class="inline-block w75"  style="width:14%;">
							<input type="text" name="value_name" value="{$v.attr_value_name}" onchange="updateAttrvalue('value_name',{$v.attr_value_id},this);" />
							<span class="spec_box_{$v.attr_value_id}">
							{if condition="$v['type'] eq 1"}{else /}<a href="javascript:;" id="showAttrbox_{$v.attr_value_id}" onclick="showAttrbox({$v.attr_value_id},{$v.attr_id},this);" style="color:#00C0FF;">编辑属性值</a>{/if}
							</span>
							<input type="hidden" name="attr_value_id" value="{$v.attr_value_id}" />
						</div>
						
						<div class="inline-block w75">
							<select class="selectbox" id="type_box_{$v.attr_value_id}" value="{$v.type}" onchange="updateAttrvalue('type_box',{$v.attr_value_id},this);" style="width:110px;">
								<option value="1" {if condition="$v.type eq 1"}selected="selected"{/if}>输入框</option>
								<option value="2" {if condition="$v.type eq 2"}selected="selected"{/if}>单选框</option>
								<option value="3" {if condition="$v.type eq 3"}selected="selected"{/if}>复选框</option>
							</select>
						</div>
						
						<div class="inline-block w75 w140" id="value_{$v.attr_value_id}" title="{$v.value}" >
							{$v.value}
							<input type="hidden" class="value_{$v.attr_value_id}" value="{$v.value}" />
						</div>
						
						
						<div class="inline-block w75" style="width:10%;">
							{if condition="$v.is_search eq 0"}
								<a href="javascript:;" class="is_search" is_search="0" onclick="updateAttrvalue('is_search',{$v.attr_value_id},this);"><i class="fa fa-times text-danger text"></i></a>
							{else /}
								<a href="javascript:;" class="is_search" is_search="1" onclick="updateAttrvalue('is_search',{$v.attr_value_id},this);"><i class="fa fa-check text-success text-active"></i></a>
							{/if}
						</div>
						<div class="inline-block w19"><a href="javascript:;" onclick="delOldAttributeValue(this, {$v.attr_id}, {$v.attr_value_id})">删除</a></div>
					</div>
				{/foreach}
				</div>
				<div><div class="col-sm-2 control-label"><label style="margin-left: 5px;"></label></div><a href="javascript:;" onclick="addSpecValue(this)"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加一个属性</a></div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            
              <!-- 点击编辑弹出框开始 -->
				<div class="attr_table" id="Attrbox" style="display:none;">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h3 id="myModalLabel">编辑属性值</h3>
					</div>
					<div class="w100">
						<div class="inline-block w5"></div>
						<div class="inline-block w75" style="width:80%;">属性名称</div>
						<div class="inline-block w19">操作</div>
					</div>
					<div class="table-body">
						<div class="w100 Spec_data">
							<div class="inline-block w5"><label style="margin-left: 15px;"> <input type="checkbox"></label></div>
							<div class="inline-block w75" style="width:57%">
								<input type="text" name="attr_value" style="width:200px;">
							</div>
							<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>
						</div>
					</div>
					<div class="addSpec"><a href="javascript:;" onclick="addAttrSmallValue(this)"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加一个属性</a></div>
						<div class="modal-footer">
							<input type="hidden" id="click_order"/>
							<button class="btn btn-info" onclick="submitAttrValue()" style="display:inline-block;">保存</button>
							<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
						</div>
					</div>
				<!-- 点击编辑弹出框结束 -->
          
				
			<div class="form-group">
				<div class="col-sm-4 col-sm-offset-2">
					<input type="hidden" id="attr_id" value="{$attr_id}" />
					<button class="edit_button" onclick="updateAttributeService();">提交</button>
<!-- 					<a href="javascript:void(0);" onclick="addGoodsBrandAjax()" class="btn btn-primary">保存</a> -->
				</div>
			</div>
		</div>
	</div>
</section>

<script>
//点击编辑属性值弹出框事件
function showAttrbox(attr_value_id,attr_id,e){
	$("#Attrbox").show();
	var click_order = $("#click_order").attr('click_order',attr_value_id);
	var value_str = $(e).parents(".value_data").find(".value_"+attr_value_id).val();
	if(value_str != undefined){
		var value_arr = value_str.split(',');
		var html = '';
		for(var i=0; i<value_arr.length; i++){
			html += '<div class="w100 Spec_data">';
			html += '<div class="inline-block w5"><label style="margin-left: 15px;"> <input type="checkbox" style=""></label></div>';
			html += '<div class="inline-block w75" style="width:80%">';
			html += '<input type="text" name="attr_value" style="width:200px;margin-left:4px;line-height:normal;margin-top:7px;" value="'+value_arr[i]+'">';
			html += '</div>';
			html += '<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
			html += '</div>';
		}
	}else{
		var html = '';
		html += '<div class="w100 Spec_data">';
		html += '<div class="inline-block w5"><label style="margin-left: 15px;"> <input type="checkbox" style=""></label></div>';
		html += '<div class="inline-block w75" style="width:80%">';
		html += '<input type="text" name="attr_value" style="width:200px;margin-left:4px;line-height:normal;margin-top:7px;" value="">';
		html += '</div>';
		html += '<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
		html += '</div>';
	}
	$(".Spec_data").remove();
	$(".attr_table .table-body").append(html);
}
$(".close").click(function(){
	
	$("#Attrbox").hide();
})
$(".btn").click(function(){
	
	$("#Attrbox").hide();
})

function addAttrSmallValue(e){
	var spec_data_num = $(".Spec_data").length;
	var html = '<div class="w100 Spec_data">';
	html += '<div class="inline-block w5"><label style="margin-left: 15px;"> <input type="checkbox" /></label></div>';
	html += '<div class="inline-block w75" style="width:80%">';
	html += '<input type="text" name="attr_value" style="width:200px;margin-left: 4px;line-height:normal;margin-top:7px;">';
	html += '</div>';
	html += '<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
	html += '</div>';
	$(e).parents(".attr_table").find(".table-body").append(html);

}
function delSpecValue(e){
	$(e).parents(".Spec_data").remove();
}

function submitAttrValue(){
	var click_order = $("#click_order").attr('click_order');
	var attr_value_obj = $("input[name='attr_value']");
	var attr_value_str = '';
	attr_value_obj.each(function(i){
		if(attr_value_obj.eq(i).val() != ''){
			attr_value_str += ',' + $.trim(attr_value_obj.eq(i).val());
		}
	});
	attr_value_str = attr_value_str.substr(1);
	$("#value_"+click_order).text(attr_value_str);
	$("#value_"+click_order).append('<input type="hidden" class="value_'+click_order+'" value="'+ attr_value_str +'">');
	updateAttrvalue('value', click_order, attr_value_str);
	
}

function updateAttrvalue(type,attr_value_id,e){
	$("#Attrbox").hide();
	var field_name = '';
	var field_value = '';
	if(type == 'value_sort'){
		field_name = 'sort';
		field_value = $(e).val();
	}else if(type == 'value_name'){
		field_name = 'attr_value_name';
		field_value = $(e).val();
		if(field_value == ''){
			$(e).focus();
			showMessage('error', '属性名称不能为空');
			return false;
		}
	}else if(type == 'type_box'){
		var attr_id = $("#attr_id").val();
		if($(e).val()==1){
			$(e).parents(".value_data").find(".spec_box_"+attr_value_id).html('<a href="javascript:;" style="color: #777;"></a>');
			updateAttrvalue('value',attr_value_id,'');
			field_name = 'type';
			field_value = $(e).val();
			$(e).parents(".value_data").find("#value_"+attr_value_id).html('<input type="hidden" class="value_'+attr_value_id+'" value="">');
			$("#Attrbox .Spec_data:gt(0)").remove();
			$("#Attrbox .Spec_data").eq(0).find("input[name='attr_value']").val('');
		}else{
			$(e).parents(".value_data").find(".spec_box_"+attr_value_id).html('<a href="javascript:;" id="showAttrbox_'+attr_value_id+'" onclick="showAttrbox('+attr_value_id+','+attr_id+',this);" style="color:#00C0FF;">编辑属性值</a>');
			$(e).parents(".value_data").find("#value_"+attr_value_id).html('<input type="hidden" class="value_'+attr_value_id+'" value="">');
			$("#Attrbox .Spec_data:gt(0)").remove();
			$("#Attrbox .Spec_data").eq(0).find("input[name='attr_value']").val('');
			return false;
		}
	}else if(type == 'value'){
		var type = $('#type_box_'+attr_value_id).val();
		field_name = 'value';
		field_value = e;
		if(type > 1){
			if(field_value == ''){
				$('#type_box_'+attr_value_id).focus();
				showMessage('error', '类型为单选框或复选框时，属性值不能为空');
				return false;
			}else{
				$.ajax({
					type : "post",
					url : "{:__URL('PLATFORM_MAIN/goods/modifyattributevalueservice')}",
					data : {
						'attr_value_id' : attr_value_id,
						'field_name' : 'type',
						'field_value' : type
					},
					dataType : "json",
					success : function(data) {
					}
				});
			}
		}
	}else if(type == 'is_search'){
		field_name = 'is_search';
		field_value = $(e).attr('is_search');
		if(field_value==1){
			field_value = 0;
		}else if(field_value == 0){
			field_value = 1;
		}
	}
	$.ajax({
		type : "post",
		url : "{:__URL('PLATFORM_MAIN/goods/modifyattributevalueservice')}",
		data : {
			'attr_value_id' : attr_value_id,
			'field_name' : field_name,
			'field_value' : field_value
		},
		dataType : "json",
		success : function(data) {
			if(type=='is_search'){
				if(field_value==1){
					$(e).attr('is_search',1);
					$(e).parent().find(".is_search").html('<i class="fa fa-check text-success text-active"></i>');
				}else if(field_value==0){
					$(e).attr('is_search',0);
					$(e).parent().find(".is_search").html('<i class="fa fa-times text-danger text"></i>');
				}
			}
		}
	});
	
	
}
//点击改变是否可以编辑属性值
function updateAttrselectvalue(order,e){
	if($(e).val()==1){
		$(e).parents(".value_data").find(".spec_box_"+order).html('<a href="javascript:;"></a>');
	}else{
		$(e).parents(".value_data").find(".spec_box_"+order).html('<a href="javascript:;" id="showAttrbox_'+order+'" onclick="showAttrbox('+order+',this);" style="color:#00C0FF;">编辑属性值</a>');
	}
	$(e).parents(".value_data").find("#value_"+order).html('');
	$("#Attrbox .Spec_data:gt(0)").remove();
	$("#Attrbox .Spec_data").eq(0).find("input[name='attr_value']").val('');
}
function addSpecValue(e){
	var data_obj_num = $(".new_data").length;
	var html = '<div class="w100 value_data new_data">';
	html += '<div class="col-sm-2 control-label"><label style="margin-left: 5px;"> <input type="checkbox" style=""></label></div>';
	html += '<div class="inline-block w75" style="margin-right: 4px;margin-top:7px;">';
	html += '<input type="text" name="value_sort_'+data_obj_num+'" value="'+data_obj_num+'">';
	html += '</div>';
	html += '<div class="inline-block w75" style="margin-right: 5px;width:14%;">';
	html += '<input type="text" name="value_name_'+data_obj_num+'" style="margin-right:5px;"><span class="spec_box_'+data_obj_num+'"></span>';
	html += '</div>';
	html += '<div class="inline-block w75" style="margin-right: 5px;">';
	html += '<select class="selectbox_'+data_obj_num+'" id="type_'+data_obj_num+'" style="width:110px;" onchange="updateAttrselectvalue('+data_obj_num+',this);">';
	html += '<option value="1">输入框</option>';
	html += '<option value="2">单选框</option>';
	html += '<option value="3">复选框</option>';
	html += '</select>';
	html += '</div>';
	html += '<div class="inline-block w75 w140" style="margin-right: 4px;" id="value_'+data_obj_num+'">';
	html += '</div>';
	html += '<div class="inline-block w75" style="width:10%;">';
	html += '<a href="javascript:;" class="is_search is_search_'+data_obj_num+'" is_search="1" onclick="tab_is_search(this)"><i class="fa fa-check text-success text-active"></i></a>';
	html +='</div>';
	html += '<div class="inline-block w19"><a href="javascript:;" onclick="delNewAttributeValue(this)">删除</a></div>';
	html += '</div>';
	$(e).parents(".table").find(".table-body").append(html);
}
function delOldAttributeValue(e, attr_id, attr_value_id){
	$( "#dialog" ).dialog({
		buttons: {
			"确定": function() {
				$(this).dialog('close');
				$.ajax({
					type : "post",
					url : "{:__URL('PLATFORM_MAIN/goods/deleteattributevalue')}",
					data : {
						'attr_id' : attr_id,
						'attr_value_id' : attr_value_id
					},
					dataType : "json",
					success : function(data) {
						if (data['code'] > 0) {
							$(e).parents('.w100').remove();
						}else if(data['code'] == 0){
						}else if(data['code'] == -1){
							showMessage('error', '当前属性已经使用过，不能删除！');
						}else if(data['code'] == -2){
							showMessage('error', '当前属性已经是最后一个，不能删除！');
						}
					}
				});
			},"取消,#e57373" : function(){
				$(this).dialog('close');
			}
		},
		contentText:"你确定删除吗？",
		title:"消息提醒"
	});
}
function delNewAttributeValue(e){
	$( "#dialog" ).dialog({
		buttons: {
			"确定": function() {
				$(this).dialog('close');
				$(e).parents('.w100').remove();
			},"取消,#e57373" : function(){
				$(this).dialog('close');
			}
		},
		contentText:"你确定删除吗？",
		title:"消息提醒"
	});
}
function validation() {
	var attr_name = $("#attr_name");
	if (attr_name.val() == "") {
		attr_name.focus().next("span").show();
		return false;
	} else {
		attr_name.next("span").hide();
	}	
	return true;
}

var flag = false;//防止重复提交
function updateAttributeService() {
	if (!validation()) {
		return;
	}
	var attr_name = $("#attr_name").val();
	var sort = $("#sort").val();
	if ($("#is_visible").prop("checked")) {
		var is_visible = 1;
	} else {
		var is_visible = 0;
	}
	
	var select_box = '';
	$("input[name='spec']:checked").each(function(){
		select_box = select_box+','+$(this).val();
	});
	select_box = select_box.substring(1);
	var attr_id = $("#attr_id").val();
	
	var data_obj = $(".new_data");
	var data_obj_str = '';
	data_obj.each(function(i){
		if(data_obj.eq(i) != ''){
			var value_sort = $("input[name='value_sort_"+i+"']").val();
			var value_name = $.trim($("input[name='value_name_"+i+"']").val());
			if(value_name == ''){
				$("input[name='value_name_"+i+"']").focus();
				showMessage('error',"属性名称不能为空");
				flag = true;
				return false;
			}else{
				flag = false;
			}
			var type = $("#type_"+i).val();
			var value = $("#value_"+i).text();
			if(type > 1){
				if(value == ''){
					$("#type_"+i).focus();
					showMessage('error',"类型为单选框或复选框时，属性值不能为空");
					flag = true;
					return false;
				}else{
					flag = false;
				}
			}
			
			var is_search = $(".is_search_"+i).attr("is_search");
			var new_str = '';
			new_str = value_name+ '|' +type+ '|' +value_sort+ '|' +is_search+ '|' +value;
			
			data_obj_str = data_obj_str + ';' + new_str;
		}
	});
	data_obj_str = data_obj_str.substr(1);
	if(flag){
		return;
	}
	flag = true;
	$.ajax({
		type : "post",
		url : "{:__URL('PLATFORM_MAIN/goods/updategoodsattribute')}",
		data : {
			'attr_id' : attr_id,
			'attr_name' : attr_name,
			'sort' : sort,
			'is_visible' : is_visible,
			'select_box' :select_box,
			'data_obj_str' :data_obj_str,
		},
		success : function(data) {
			if (data["code"] > 0) {
				showMessage('success', "修改成功","{:__URL('PLATFORM_MAIN/goods/attributelist')}");
			} else {
				showMessage('error', "修改失败");
				flag = false;
			}
		}
	});
}
</script>
{/block}